<template>
  <div class="general-situation">
    <div class="currency">
      <img src="../images/BTC.png" alt="">
      <span>BTC</span>
      比特币
    </div>

    <div class="info">
      <div>
        <div>比特币</div>
        <div>No. 1</div>
      </div>
      <div>
        <div>市值排名</div>
        <div>No. 1</div>
      </div>
      <div>
        <div>市值</div>
        <div>¥8.84万亿</div>
      </div>
      <div>
        <div>流通量</div>
        <div>19,756,550 BTC</div>
      </div>
      <div>
        <div>添加自选比例</div>
        <div>99.99%</div>
      </div>
      <div>
        <div>历史最高价</div>
        <div>
          <span>¥520,479.4</span>
          <span>(2024/03/13)</span>
        </div>
      </div>
      <div>
        <div>历史最低价</div>
        <div>¥478.32(2013/03/13)</div>
      </div>
      <div>
        <div>首次发行时间</div>
        <div>2008/10/30</div>
      </div>
      <div>
        <div>所属公链</div>
        <div>BTC</div>
      </div>
      <div>
        <div>首次发行价</div>
        <div>¥0.017635</div>
      </div>
      <div>
        <div>最大供应量</div>
        <div>21,000,000 BTC</div>
      </div>
      <div>
        <div>最大供应市值</div>
        <div>¥9.4万亿</div>
      </div>
      <div>
        <div>流通率</div>
        <div>94.07%</div>
      </div>
    </div>

    <div class="detail">
      最大供应量与流通量数据来源于 CoinGecko 平台, 数据仅供参考且不构成投资建议，本平台对信息的准确性不提供任何保证。
    </div>

    <div class="max">
      <div>
        <img src="../images/max.png" alt="">
        <div>
          <span>最大供应量</span>
          <span>2,100万</span>
        </div>
      </div>
    </div>

    <div class="progress">
      <div>
        <van-progress :percentage="70" stroke-width="8" track-color="#191919" color="#0568fc"/>
        <span>70.00%</span>
      </div>
      <span>PoW挖矿</span>
    </div>

    <div class="BTC-detail">
      <div class="title">关于 BTC</div>
      <div class="content" :class="{ expanded: isExpanded }">
        比特币是一种数字货币，也是一种支付系统，由一个化名中本聪(Satoshi Nakamoto)的匿名人士或团体于
        2008年首次提出。比特币是去中心化的，这意味着它不受政府或金融机构的控制。交易通过节点网络进行验证，并记录在名为区块链的公共分布式
        比特币是一种数字货币，也是一种支付系统，由一个化名中本聪(Satoshi Nakamoto)的匿名人士或团体于
        2008年首次提出。比特币是去中心化的，这意味着它不受政府或金融机构的控制。交易通过节点网络进行验证，并记录在名为区块链的公共分布式
      </div>
      <div class="expand" @click="toggleExpand">
        {{ isExpanded ? '收起' : '展开' }}
        <van-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" />
      </div>
    </div>

    <!-- <div class="other">
      <div class="title">官方链接</div>
      <div>
        <div v-for="item in links" class="item">
          <img :src="item.icon" alt="">
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>

    <div class="other">
      <div class="title">社交媒体</div>
      <div>
        <img src="../images/TW.png" alt="">
      </div>
    </div> -->

  </div>
</template>

<script>
import { Progress } from 'vant';

export default {
  name: 'GeneralSituation',
  components: {
    'van-progress': Progress
  },
  data() {
    return {
      isExpanded: false,
      links: [
        { link: '', name: '官网', icon: require('../images/link1.png') },
        { link: '', name: 'GitHub', icon: require('../images/link2.png') },
        { link: '', name: '区块浏览器', icon: require('../images/link3.png') },
      ]
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>

<style lang="scss" scoped>
.general-situation {
  height: 100%;

  .currency {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 26px;
    color: #BDBDBD;

    span {
      font-size: 40px;
      color: #fff;
    }
  }

  .info {
    &>div {
      display: flex;
      justify-content: space-between;
      margin: 34px 0;
      font-size: 28px;

      &>div:first-child {
        color: #929292;
      }

      &>div:last-child {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }

  .detail {
    font-size: 24px;
    color: #858585;
  }

  .max {
    background-color: #191919;
    padding: 28px 24px;
    border-radius: 6px;
    margin: 40px 0;

    &>div {
      background-color: #292828;
      width: fit-content;
      display: flex;
      align-items: center;
      gap: 24px;
      border-radius: 6px;

      &>div {
        display: flex;
        flex-direction: column;

        &>span:first-child {
          color: #929292;
          font-size: 24px;
        }

        &>span:last-child {
          font-size: 32px;
        }
      }
    }
  }

  .progress {
    font-size: 24px;

    /deep/ .van-progress__pivot {
      display: none !important;
    }

    &>div {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 22px;

      span {
        color: #fff;
      }
    }

    span {
      color: #929292;
    }
  }

  .BTC-detail {
    margin: 70px 0;

    .title {
      font-size: 40px;
      margin-bottom: 30px;
    }

    .content {
      font-size: 28px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 5;

      &.expanded {
        -webkit-line-clamp: inherit;
      }
    }

    .expand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }
  }

  .other {
    margin-bottom: 70px;

    .title {
      font-size: 40px;
      margin-bottom: 30px;
    }

    &>div {
      display: grid;
      gap: 20px;

      &>div {
        display: flex;
        align-items: center;
        gap: 16px;

        span {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>